<template>
  <aside
    v-bind:style="{
      width: viewInfo.widthAside - viewInfo.borderWidth * 2  + 'px'}"
    class="main-sidebar animated"
    :class="{
      showSlide: sidebar.show,
      hideSlide: !sidebar.show,
      expandSide:(!sidebar.collapsed)
      }">

    <el-scrollbar tag="div"
                  wrapClass="vue-scrollbar"
                  v-if="(!sidebar.collapsed)">
      <div class="sidebar">
        <el-menu :default-active="onRoutes"
                 :default-openeds="onRouteKeys"
                 class="el-menu-style"
                 v-bind:style="{
                    height: viewInfo.heightAside - viewInfo.borderWidth * 2 + 'px'}"
                 theme="light" router :collapse="sidebar.collapsed">
          <template v-for="item in showMenuList">
            <sub-menu :param="item"></sub-menu>
          </template>
        </el-menu>
      </div>
    </el-scrollbar>

    <div class="sidebar"
         v-else>
      <el-menu :default-active="onRoutes"
               class="el-menu-style"
               v-bind:style="{
                height: viewInfo.heightAside - viewInfo.borderWidth * 2 + 'px'}"
               theme="light" router :collapse="sidebar.collapsed">
        <template v-for="item in showMenuList">
          <sub-menu :param="item"></sub-menu>
        </template>
      </el-menu>
    </div>
  </aside>
</template>
<script>
  import { mapGetters } from 'vuex'
  import {delMenuTreeButton} from '../../../utils/utils'

  export default {
    name: 'sideMenu',
    showMenuList: [],
    props: {
      show: Boolean
    },
    data () {
      return {

      }
    },
    created () {
      this.showMenuList = delMenuTreeButton(JSON.parse(JSON.stringify(this.menuList)))
    },
    computed: {
      ...mapGetters({
        sidebar: 'permission/sidebar',
        menuList: 'permission/menuList',
        viewInfo: 'permission/viewInfo'
      }),
      onRoutes () {
        return this.$route.path
      },
      onRouteKeys () {
        const getParentArray = (path, ms, kas = []) => {
          if (ms && ms.length > 0) {
            for (let k = 0, length = ms.length; k < length; k++) {
              if (path === ms[k].href) {
                kas.push(ms[k].href)
                break
              }
              let i = kas.length
              if (ms[k].children && ms[k].children.length > 0) {
                getParentArray(path, ms[k].children, kas)
              }
              if (i < kas.length) {
                kas.push(ms[k].href)
              }
            }
          }
          console.log('onRouteKeys:', kas)
          return kas.reverse()
        }
        return getParentArray(this.$route.path, this.menuList)
      }
    }
  }
</script>
<style>
  .main-sidebar {
    position: fixed;
    z-index: 810;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  }

  .vue-scrollbar{
    background-color: #ffffff !important;
  }

  .main-sidebar .el-scrollbar__bar.is-vertical{
    display: none;
  }

</style>
